<!DOCTYPE html>
<html>
	<head>
		<title>个人资料</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">

		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>

		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style type="text/css">

		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<el-form ref="form" :model="user" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="user.nickname"></el-input>
				</el-form-item>

				<el-form-item label="性别">
					<template>
						<el-radio v-model="user.sex" :label="1">男</el-radio>
						<el-radio v-model="user.sex" :label="2">女</el-radio>
					</template>
				</el-form-item>

				<el-form-item label="部门">
					<el-input v-model="user.department"></el-input>
				</el-form-item>

				<el-form-item label="职务">
					<el-input v-model="user.duty"></el-input>
				</el-form-item>

				<el-form-item label="联系电话">
					<el-input v-model="user.contact"></el-input>
				</el-form-item>

				<el-form-item label="邮箱">
					<el-input v-model="user.email"></el-input>
				</el-form-item>
				
				<el-form-item label="头像">
					<el-upload
					  class="avatar-uploader"
					  accept=".png,.jpg,.jpeg,.gif,.bmp,.svg,.tif"
					  :action="URL_UPLOAD"
					  :headers="{authorization: authorization}"
					  :show-file-list="false"
					  :on-success="handleImgSuccess"
					  :on-error="handleImgError">
					  <img v-if="user.img" :src="user.img" class="avatar" width="200px">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submit">保存</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</div>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					authorization: '',
					id: user.info.id,
					user: {},
					isCreate: false,
				},
				created: function() {
					axiosConfig(axios)
				},
				mounted() {
					this.f5();
					this.authorization = user.token
				},
				methods: {
					createUser() {
						return {
							nickname: '',
							userId: this.id,
							sex: 1,
							department: '',
							duty: '',
							contact: '',
							email: '',
							img: '',
						}
					},

					// 刷新
					f5: function() {
						let loading = elLoadding({
							that: this
						})

						let url = getUrl('pub-user', 'list')
						let http = getHttp(axios, 'pub-user', 'list')
						http(url, {
								params: {
									isPage: false,
									params: JSON.stringify([{
										left: 'userId',
										op: 'eq',
										right: [this.id]
									}])
								}
							})
							.then(res => {
								if (res.list && res.list.length > 0) {
									this.user = res.list[0]
								} else {
									this.user = this.createUser()
									this.isCreate = true
								}

								loading.close()
							})
							.catch((err) => { // 请求失败处理
								this.user = this.createUser()
								this.isCreate = true
								loading.close()
							});
					},

					// 修改
					submit() {
						let loading = elLoadding({
							that: this
						})

						let op = this.isCreate ? 'add' : 'edit'

						let url = getUrl('pub-user', op, this.isCreate ? '' : [this.user.id])
						let http = getHttp(axios, 'pub-user', op)

						if (this.user.id) delete this.user.id
						http(url, this.user)
							.then(res => {
								user.user = res
								user.info.nickname = res.nickname
								user.info.img = res.img
								setLoginInfo(user)

								parent.location.reload();

								loading.close()
							})
							.catch((err) => { // 请求失败处理
								sa.error(err.msg);
								loading.close()
							});
					},

					/**
					 * 头像上传成功
					 * @param {Object} res
					 * @param {Object} file
					 * @param {Object} fileList
					 */
					handleImgSuccess(res, file, fileList){
						if (res.code == RES_CODE_SUCCESS) {
							this.user.img = res.data[0].url
						} else {
							sa.error(res.msg);
						}
					},
					
					/**
					 * 头像上传失败
					 * @param {Object} err
					 * @param {Object} file
					 * @param {Object} fileList
					 */
					handleImgError(err, file, fileList){
						sa.error(err.msg);
					},
				}
			})
		</script>
	</body>
</html>
